<template>
  <view class="content">
    <swiper class="notices" indicator-dots autoplay circular>
      <swiper-item v-for="i in 4" :key="i">
        <view class="notice"
          ><text>轮播公告{{ i }}</text></view
        >
      </swiper-item>
    </swiper>
    <view class="modal-item" v-for="item in modules" :key="item.id">
      <navigator
        :url="item.url"
        open-type="navigate"
        hover-class="navigator-hover"
      >
        <view class="module-item-bg">
          <view :class="item.icon"></view>
          <view>{{ item.title }}</view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script setup>
const modules = reactive([

  {
    id: uni.$uv.guid(),
    title: "我的课程",
    url: "/pages/StuCourseCenter/StuCourseCenter",
    icon: "t-icon t-icon-zhuxiukecheng",
  },
]);
</script>

<style lang="scss">
$modal-height: 200rpx;
.content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 8rpx;

  .modal-item {
    text-align: center;
    width: 360rpx;
    height: $modal-height;
    font-size: 50rpx;
    line-height: $modal-height;
    border: 1px solid;
    border-radius: 40rpx;
    margin-bottom: 100rpx;
    background-color: #0b8ee6;
    background: linear-gradient(#abdcff, #0396ff);
    color: #fff;
    .module-item-bg {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
    }
  }
  .notices {
    width: 680rpx;
    border: 1px solid;
    border-radius: 60rpx;
    padding: 30rpx;
    box-sizing: border-box;
    height: 360rpx;
    margin-bottom: 50rpx;
  }
}
</style>
